<template>
	<view class="box" :style="{height: wh +'px'}">
		<swiper class="swiper" circular indicator-dots autoplay>
			<swiper-item v-for="(item,index) in bannerList" @click="toBannerDetail(item)" :key="item.id">
				<view>
					<image :src="item.imgUrl[0].url" @load="imageLoad(index,$event)" style="width: 100%;height: 100%;"
						v-if="!BannerMode[index]">
					</image>
					<image :src="item.imgUrl[0].url" mode="heightFix" v-else></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="video-nav">
			<text :class="{'nav-item':true,active:active===index}" v-for="(item,index) in tabNavbar" :key="index"
				@click="switchNavigationBar(index)">
				{{item}}
			</text>
		</view>
		<view class="list-box" v-if="videoList.length">
			<view class="list-item" v-for="(item,index) in temporaryList" @click="toVideoDetail(item.subjectCode)"
				:key="item.subjectCode">
				<!-- uploadType:1  视频链接，展示视频封面 -->
				<view v-if="item.uploadType == '1'">
					<image :src="item.videoCover[0].url" alt="" >
				</view>
				<view v-else>
					<video :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" v-if="item.videoUrl"
						:show-center-play-btn="false" :src="item.videoUrl"></video>
				</view>
				
				<view class="item-detail">
					<text>{{item.topicTitle}}</text>
					<view class="box-doctor">
						<view class="doctor">
							医师:{{item.doctorName}}
						</view>
						<view class="category">
							类别:{{item.categoryName}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<uni-icons type="minus"></uni-icons>
			<text>现在还没有视频, 去看看其他的吧</text>
		</view>
	</view>
</template>

<script>
	import {
		getVideoListApi
	} from '../../common/api/lectureApi.js'
	import {
		getBannerListApi
	} from '../../common/api/homeApi.js'
	export default {
		data() {
			return {
				videoList: [],
				pageNum: 1,
				finish: false,
				bannerList: [],
				valve: false,
				tabNavbar: [
					'全部视频',
					'未观看视频',
					'已观看视频'
				],
				active: 0,
				temporaryList: [],
				isloading: false,
				wh: 0,
				show: true,
				BannerMode: [],
				counter: 0
			}
		},
		onLoad() {
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		methods: {
			async getVideoList(callback) {
				this.isloading = true
				if (this.valve) return uni.$showToast('数据请求中,请稍候')
				this.valve = true
				const r = await getVideoListApi(this.pageNum)
				if (!r.data.records.length) {
					this.finish = true
					return uni.$showToast('已经到底啦');
				}
				//存储进vuex
				this.videoList.push(...r.data.records)
				this.switchNavigationBar()
				this.valve = false
				this.isloading = false
				callback && callback()
			},
			async getBannerList() {
				const r = await getBannerListApi()
				this.bannerList = r.data
				this.bannerList.forEach((item, index) => this.BannerMode[index] = false)
			},
			toVideoDetail(subjectCode) {
				wx.navigateTo({
					url: `/subpkg/videoDetail/videoDetail?subjectCode=${subjectCode}`
				})
			},
			toBannerDetail(item) {
				if (item.category === '0') {
					//医生
					uni.navigateTo({
						url: `../../subpkg/doctorDetail/doctorDetail?category=${item.category}&code=${item.code}`
					})
				} else if (item.category === '1') {
					//试题
					uni.navigateTo({
						url: `../../subpkg/videoDetail/videoDetail?category=${item.category}&code=${item.code}`
					})
				} else if (item.category === '2') {
					//商品
				}
			},
			switchNavigationBar(index) {
				if (index !== undefined) {
					this.active = index
				}
				if (this.active === 1) {
					this.temporaryList = this.videoList.filter(item => !item.videoStatus)
				} else if (this.active === 2) {
					this.temporaryList = this.videoList.filter(item => item.videoStatus)
				} else {
					this.temporaryList = this.videoList
				}
			},
			RefreshTool() {
				this.pageNum = 1
				this.valve = false
				this.finish = false
				this.videoList = []
				this.isloading = false
			},
			imageLoad(index, e) {
				this.counter = this.counter + 1
				if (e.detail.height > e.detail.width) {
					this.BannerMode[index] = true
				} else {
					this.BannerMode[index] = false
				}
				if (this.counter === this.bannerList.length) {
					this.getBannerList()
				}
			}
		},
		onShow() {
			this.RefreshTool()
			this.getVideoList()
			this.getBannerList()
		},
		onPullDownRefresh() {
			this.RefreshTool()
			this.getVideoList(uni.stopPullDownRefresh)
			this.getBannerList()
		},
		onReachBottom() {
			if (this.finish) return uni.$showToast('已经到底啦');
			if (this.isloading) return uni.$showToast('请求加载中');
			this.pageNum = this.pageNum + 1
			this.getVideoList()
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: 350rpx;
		text-align: center;
		font-size: 50rpx;
		font-weight: 700;
		color: #fff;

		swiper-item {
			height: 100%;
			width: 100%;

			view {
				width: 100%;
				height: 100%;
				line-height: 350rpx;
			}
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	/deep/ .uni-grid-item__box {
		background-color: #f5f7f7;
		border: 0;
	}

	.video-nav {
		margin: 10rpx 0 10rpx 10rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;

		.nav-item {
			padding: 25rpx 15rpx;
			box-sizing: border-box;
			border-bottom: 4rpx solid transparent;
		}

		.active {
			color: #5aef7d;
			border-bottom: 4rpx solid #5aef7d;
		}
	}

	.list-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;

		.list-item {
			width: 48%;
			margin-bottom: 20rpx;
			background-color: #f5f5f5;

			video {
				width: 100%;
				height: 300rpx;
			}
			image {
				width: 100%;
				height: 300rpx;
			}

			&:nth-child(2n + 1) {
				margin-left: 1%;
				margin-right: 2%
			}

			.item-detail {
				padding: 0 10rpx;

				text {
					font-size: 35rpx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}

				.box-doctor {
					margin: 20rpx 0 0 0;
					padding-bottom: 20rpx;
					font-size: 25rpx;
					display: flex;
					justify-content: space-between;

					.category {
						padding-right: 10rpx;
					}
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: rgba(0, 0, 0, 0.25);
		width: 100%;
		font-size: 28rpx;

		/deep/ uni-icons {
			text {
				font-size: 200rpx !important;
				color: rgba(0, 0, 0, 0.25) !important;
			}
		}
	}
</style>
